<template>
  <div
    class="source"
    v-loading="pageLoading"
  >
    <div class="producter-center">
       <div slot="header">
        <el-button
          @click="createRelation"
          icon="el-icon-plus"
          class="dark-btn"
          style="margin-bottom:0 !important"
        >创建关联</el-button>
      </div>
      <div class="mb-lg">
        <v-table
          :data="tableData"
          ref="table"
          :listLoading="listLoading"
          :loadingText="loadingText"
          :pageSize="pageSize"
          :paginationTotal="total"
          v-on:pageSizeChange="pageSizeChange"
          v-on:currentPageChange="currentPageChange"
          border
          pagination
        >
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="45"
          ></el-table-column>
          <el-table-column
            label="商品名称"
            align="center"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span
                class="edit-item"
                >{{ scope.row.spuName }}</span
              >
            </template>
          </el-table-column>
          <el-table-column label="商品图片" align="center">
            <template slot-scope="scope">
              <el-image
                :src="scope.row.image || ''"
                style="width: 60px; height: 60px; vertical-align: middle"
                fit="fill"
              >
                <div
                  slot="placeholder"
                  class="image-slot"
                  v-loading="true"
                  element-loading-text="加载中"
                ></div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
            label="SPU编码"
            align="center"
            min-width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.spuCode }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            prop="spuStatus"
            align="center"
            property="productStatus"
            :formatter="formatPaperType"
            min-width="110"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            label="排序"
            align="center"
            min-width="120"
          >
           <template slot-scope="scope">
             <span v-if="!scope.row.changeSort">{{ scope.row.sort }}</span>
             <div v-else>
              <el-input-number
                v-model="scope.row.sort"
                :controls="false"
                :step-strictly="true"
                size="mini"
              >
              </el-input-number>
              <i @click="saveSort(scope.row)" class="el-input__icon el-icon-circle-check colorLink"></i>
             </div>
           </template>
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            align="center"
            min-width="180"
          >
            <template slot-scope="scope">
              <el-row type="flex" justify="space-around">
                <el-col :span="10">
                  <span
                    class="edit-item colorLink"
                    @click="changeSort(scope.row)"
                    ><i class="el-icon-link"></i> 变更排序</span
                  >
                </el-col>
                <el-col :span="8">
                  <span
                    class="edit-item colorLink"
                    @click="deleteRelation(scope.row)"
                    ><i class="el-icon-link"></i> 删除</span
                  >
                </el-col>
              </el-row>
            </template>
          </el-table-column>
        </v-table>
      </div>
    </div>
    <dialog-table :openidList="idList" :productId="id" @fetchRelationList='fetchList' @fetchSpuIdList='spuIdList' ref="dialogTable"></dialog-table>
  </div>
</template>

<script>
import { getLookupItems } from '@/utils/auth'
import { mapGetters } from 'vuex'
import VTable from '@/components/PageTable/index'
import DialogTable from './dialogTable.vue'
import { relationProduct, deleteRelation, relationSort, getRelationIdList } from '@/api/product'
import { common } from '@/mixins/common'
// import Ellipsis from '@/components/Ellipsis'

export default {
  name: 'productRelation',
  components: {
    VTable,
    DialogTable
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      downloadModel: {},
      loadingText: '加载中...',
      loading: false,
      sortVal: 'SORT02',
      pageLoading: false,
      id: this.$route.params.id,
      searchList: {
        productName: '',
        spuId: '',
        skuId: '',
        searchCatalog: [],
        searchCategory: [],
        searchStatus: '',
        searchSort: ''
      },
      channel: 'web',
      columnsData: [],
      columnsData2: [],
      tableData: [],
      catalogOptions: [],
      catagoryOptions: [],
      sortByList: [],
      total: 0,
      pageSize: 10,
      currentPage: 0,
      listLoading: false,
      idList: [],
      rules: {},
      showContent: false
    }
  },
  mounted () {
    if (!this.$route.params.id) {
      this.$router.push({
        name: 'productMgmt'
      })
    } else {
      this.fetchList()
      this.spuIdList()
    }
  },
  methods: {
    // 选择排序方式
    handleSortCommand () {
      this.fetchList()
    },
    // 获取排序列表
    // getSortByList () {
    //   this.sortByList = this.lookupItems.SORT
    //     ? this.lookupItems.SORT
    //     : []
    // },
    // 获取列表数据
    fetchList (type) {
      if (type) {
        this.$refs.table.restPage()
        this.currentPage = 0
      }
      this.listLoading = true
      const params = {
        spuId: this.id.id,
        displayStart: this.currentPage,
        displayLength: this.pageSize
      }
      relationProduct(params)
        .then(res => {
          this.listLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              const obj = res.obj
              this.tableData = obj.data || []
              this.total = obj.total
            } else if (Number(res.code) === 0) {
              this.$confirm(res.msg, {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            } else {
              this.$confirm(this.$t(res.code), {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            }
          }
        })
    },

    spuIdList () {
      getRelationIdList(this.id.id)
        .then(res => {
          this.listLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              this.idList = res.obj
            } else {
              this.$confirm(this.$t(res.code), {
                confirmButtonText: this.$t('confirmOK'),
                showCancelButton: false
              })
            }
          }
        })
    },

    // 删除
    deleteRelation (row) {
      this.listLoading = true
      deleteRelation({ id: row.id })
        .then(res => {
          this.listLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              this.$confirm('删除成功', {
                confirmButtonText: '确认',
                showCancelButton: false
              }).then(() => {
                this.fetchList()
                this.spuIdList()
              })
            } else {
              this.$confirm(res.msg, {
                confirmButtonText: this.$t('confirmOK'),
                showCancelButton: false
              })
            }
          }
        })
    },

    // 商品排序
    changeSort (row) {
      this.$set(row, 'changeSort', true)
    },

    // 保存排序
    saveSort (row) {
      this.listLoading = true
      const datas = {
        id: row.id,
        sort: row.sort
      }
      relationSort(datas).then(res => {
        this.listLoading = false
        if (Number(res.code) === 1) {
          this.$confirm('操作成功', {
            confirmButtonText: '确定',
            showCancelButton: false
          })
          this.fetchList()
        } else {
          this.$confirm(this.$t(res.code), {
            confirmButtonText: '确定',
            showCancelButton: false
          })
        }
      })
    },

    formatPaperType: function (row, column, cellValue, index) {
      var paperType = getLookupItems('LookupItemsKey')
      if (paperType) {
        // eslint-disable-next-line no-unused-vars
        for (const key in paperType) {
          const item = paperType[key]
          for (let i = 0; i < item.length; i++) {
            if (item[i].dicCode === cellValue) {
              return item[i].dicName
            }
          }
        }
      }
      return row.paperType
    },

    // 创建关联
    createRelation () {
      this.$refs.dialogTable.open()
    },

    // 每页数据数目改变
    pageSizeChange (size) {
      this.pageSize = size
      this.fetchList()
    },
    // 当前页改变
    currentPageChange (curPage) {
      this.currentPage = curPage - 1
      this.fetchList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.edit-item {
  cursor: pointer;
}
.producter-center {
  .operate-container {
    display: flex;
    justify-content: space-between;
    justify-items: space-between;
    height: 30px;
    .operate-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 30px;
      .el-input {
        margin-bottom: 0;
      }
    }
  }
}
.view-container {
  padding-left: 20px;
  padding-right: 20px;

  .view-container-descrition {
    display: flex;

    .view-container-img {
      width: 270px;
      margin-right: 20px;

      & > .img-item {
        display: flex;
        justify-content: space-between;
        width: 270px;
        margin-top: 10px;
        overflow-x: scroll;
        overflow-y: hidden;
      }
    }
  }
}

.producter-center {
  .stepStyle {
    margin-top: 20px;
    font-size: 16px;
  }

  .inputDiv {
    margin: 0px 0px 15px 0px;
    border: 1px solid #e4e7ed;
    padding: 15px;
    border-radius: 5px;
  }

  .casSty {
    margin-top: 15px;
  }

  .thisStepStyle {
    margin-top: 10px;
    border: 1px solid #e4e7ed;
    border-radius: 5px;
    padding: 15px 15px 0px 15px;
  }

  .spuImage {
    margin-right: 10px;
  }

  .addImageSty {
    float: right;
    font-size: 12px;
    text-align: center;
    margin-bottom: 10px;
  }

  .stepButtonSty {
    margin: auto;
    margin-top: 10px;
  }

  .spuImage {
    width: 200px;
    height: 200px;
  }

  .demo-image {
    clear: both;
  }

  .el-upload-list__item {
    display: inline-block;
    width: 300px;
  }

  .upload-demo {
    margin-top: 10px;
  }

  /deep/ .image-slot {
    height: 60px;
    width: 60px;
    .el-loading-text {
      font-size: 12px;
    }
  }
}

.step3 {
  .el-select {
    width: 100px;
    margin-left: 10px;
  }

  .el-input {
    margin-bottom: 0;
  }

  .step3-operate {
    display: flex;
    justify-content: flex-start;
    line-height: 40px;
    margin-top: 20px;
    margin-bottom: 20px;

    .el-button {
      box-sizing: border-box;
      height: 40px;
    }
  }
}
/deep/ .el-cascader__tags .el-tag {
  max-width: calc(100% - 55px);
}
/deep/ .el-input-number--mini {
  width: calc(100% - 35px);
}
</style>
